<template>
	<div class="">

		<div class="zzc" v-if="showzzc" @click="close"></div>

		<div class="container">
			<div class="title">用户管理</div>

			<div class="flexbox">
				<div class="search_box" style="margin-bottom: 20px;">
					<input type="text" v-model="word" class="form-control search_inp" placeholder="这里输入关键词">
					<div class="sea_btn sear_btns" @click="page=1;naes=word;getlist(parentId)">
						<img src="@assets/images/search.png" alt="">
						查询
					</div>
					<div class="add_btn sear_btns" @click="openalert('add')" v-if="$permissions.indexOf(71)  != -1">
						<img src="@assets/images/add.png" alt="">
						新增
					</div>
					<div class="del_btn sear_btns" @click="delopen" v-if="$permissions.indexOf(72)  != -1">
						<img src="@assets/images/del.png" alt="">
						删除
					</div>
					<div class="down3_btn sear_btns" @click="delopen2" v-if="$permissions.indexOf(117)  != -1">
						<img src="@assets/images/sendorder.png" alt="">
						部门设置
					</div>
				</div>

				<div class="search_box" style="margin-bottom: 20px;">
					<el-upload class="upload-demo" :action="$url+'/sys/excel/importUser'" :before-upload="beforeUpload"
						:headers="{'Authorization':token}" :on-success="handleChange" :show-file-list="false"
						accept=".xls,.xlsx" v-if="$permissions.indexOf(71)  != -1">

						<div class="down2_btn sear_btns">
							<img src="@assets/images/down2.png" alt="">
							导入
						</div>
					</el-upload>

					<div class="down_btn sear_btns" @click="down">
						<img src="@assets/images/logout-rounded.png" alt="">
						下载模板
					</div>
				</div>
			</div>

			<div class="table-responsive">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<th style="width: 50px;">
							<input type="checkbox" @change="changeall" v-model="choseall" name="all" id="a"><label
								for="a"></label>
						</th>
						<!-- <th style="width: 70px;text-align: center;padding-right: 20px;">序号</th> -->
						<th>账号</th>
						<th>姓名</th>
						<th>所属部门</th>
						<th>状态</th>
						<th class="tcent">操作</th>
					</tr>

					<tr v-for="item,index in list">
						<td style="width: 50px;">
							<input type="checkbox" v-model="item.chosesf" @change="chosechange" name="chose"
								:id="item.id"><label :for="item.id"></label>
						</td>
						<!-- <td style="width: 70px;text-align: center;padding-right: 20px;">{{item.id}}</td> -->
						<td>{{item.userName}}</td>
						<td>{{item.realName}}</td>
						<td style="width: 40%;">{{item.departName}}</td>
						<td>{{item.isStoped==0?'正常':'停用'}}</td>

						<td class="tcent">
							<div class="edit" @click="openalert('edit',index)" v-if="$permissions.indexOf(117)  != -1">
								修改</div>
							<div class="reset" @click="openreset(index)" v-if="$permissions.indexOf(117)  != -1">
								重置密码</div>

							<a href="#" class="more" v-if="$permissions.indexOf(117)  != -1">
								<el-popover width="150" trigger="click" v-model="item.static"
									@hide="item.static=false;$forceUpdate()" @show="item.static=true;$forceUpdate()">
									<div class="more_box" slot="reference">
										<img v-if="!item.static" src="../../../assets/images/more_before.png" alt="">
										<img v-else src="../../../assets/images/more_after.png" alt="">
									</div>

									<div class="down_li" @click="stopuser(index)">{{item.isStoped==0?'停用':'启用'}}
									</div>

								</el-popover>


							</a>
						</td>
					</tr>


				</table>

				<div class="page_box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="inglen">
					</el-pagination>
				</div>

			</div>

		</div>

		<div class="alzzc" v-if="delalert">
			<div class="del_alert">
				<div class="modal-header tit" style="text-align: left;">
					<em></em>信息
					<div class="right" @click="delalert=false">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"
							style="line-height: normal;"><span class="iconfont icon-cha" aria-hidden="true"></span>
						</button>
					</div>
				</div>
				<div class="alert_info">确认要删除选中的<span>{{delnum}}</span>条数据吗？</div>
				<div class="alert_btns">
					<div class="alert_sure" @click="del">确认</div>
					<div class="alert_close" @click="delalert=false">取消</div>
				</div>
			</div>
		</div>

		<!--修改部门-->
		<div :class="alert_show4?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show4?'display: block;z-index:199':''">
			<div class="cent w600"
				style="justify-content: center;width: 544px;height: 310px;margin: calc(50vh - 155px) auto;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>修改部门
							<div class="right" @click="alert_show4=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="height: 200px;">
							<div class="line">
								<div class="line_title"><span>*</span>所属部门：</div>
								<el-select v-model="setdeptid" filterable placeholder="选择部门">
									<el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
							</div>
						</div>
						<div class="buttons">
							<div class="sure" @click="plset">确定</div>
							<div class="closebtn" @click="alert_show4=false">关闭</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--修改密码弹窗-->
		<div :class="alert_show3?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show3?'display: block;z-index:199':''">
			<div class="cent w600"
				style="justify-content: center;width: 544px;height: 310px;margin: calc(50vh - 155px) auto;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>修改密码
							<div class="right" @click="alert_show3=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="height: 200px;">
							<div class="line">
								<div class="line_title"><span>*</span>旧密码：</div>
								<input type="password" v-model="oldpass" class="form-control">
							</div>
							<div class="line">
								<div class="line_title"><span>*</span>新密码：</div>
								<input type="password" v-model="newpass" class="form-control">
							</div>
							<div class="line">
								<div class="line_title"><span>*</span>确认密码：</div>
								<input type="password" v-model="repass" class="form-control">
							</div>
						</div>
						<div class="buttons">
							<div class="sure" @click="changepass">确定</div>
							<div class="closebtn" @click="alert_show3=false">关闭</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--重置密码弹窗-->
		<div :class="alert_show2?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show2?'display: block;z-index:199':''">
			<div class="cent w600"
				style="justify-content: center;width: 544px;height: 230px;margin: calc(50vh - 115px) auto;">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header tit">
							<em></em>重置密码
							<div class="right" @click="alert_show2=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont" style="height: 94px;">
							<div class="line">
								<div class="line_title">输入密码：</div>
								<input type="password" v-model="pass" class="form-control">
							</div>
						</div>
						<div class="buttons">
							<div class="sure" @click="goalert">确定</div>
							<div class="closebtn" @click="alert_show2=false">关闭</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--新增分组弹窗-->
		<div :class="alert_show?'modal in fade':'modal fade'" tabindex="-1" role="dialog" id="keshi"
			:style="alert_show?'display: block;z-index:199':''">
			<div class="cent w600"
				style="justify-content: center;width: 544px;height: 590px;margin: calc(50vh - 313px) auto;">
				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">
						<div class="zzc" v-if="showzzc" @click="close" style="top: -140px;left: calc(-50vw + 31%);">
						</div>
						<div class="modal-header tit">
							<em></em>{{type=='add'?'新增用户':'修改用户'}}
							<div class="right" @click="alert_show=false;options_show=false;showzzc=false">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"
									style="line-height: normal;"><span class="iconfont icon-cha"
										aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100 search-cont">
							<div class="line">
								<div class="line_title"><span>*</span>真实姓名：</div>
								<input type="text" v-model="name" class="form-control">
							</div>
							<div class="line">
								<div class="line_title"><span>*</span>账号：</div>
								<!-- <input type="text" v-model="acc" class="form-control"> -->
								<input type="text" v-model="acc" v-if="type=='add'" class="form-control">
								<input type="text" :value="acc" readonly v-else class="form-control">
							</div>
							<div class="line" v-if="type=='add'">
								<div class="line_title"><span>*</span>密码：</div>
								<input type="password" v-model="password" class="form-control">
								<!-- <input type="password" value="000000" readonly v-else class="form-control"> -->
							</div>
							<div class="line">
								<div class="line_title">手机号：</div>
								<input type="text" v-model="phone" class="form-control">
							</div>
							<div class="line">
								<div class="line_title">分机号：</div>
								<input type="text" autocomplete="off" v-model="extTelNum" class="form-control">
							</div>


							<div class="line">
								<div class="line_title"><span>*</span>所属部门：</div>
								<div class="select_box" style="margin-left: 0;">
									<el-select v-model="deptId" filterable placeholder="选择部门">
										<el-option v-for="item in types" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
									<!-- 	<div class="form-control" id="select" style="width: 360px;"
										@click="options_show=!options_show;showzzc=!showzzc;">
										<div :style="dept=='选择部门'?'color: #999;':''">{{dept}} </div>
										<img src="../../../assets/images/down.png" alt="">
									</div>
									<div class="options" v-if="options_show">
										<div class="option" style="color: #999;">选择部门</div>
										<div class="option" @click="selectit(index)" v-for="item,index in types">
											{{item.name}}
										</div>
									</div> -->
								</div>
							</div>
							<div class="line">
								<div class="line_title">性别：</div>
								<div class="radio">
									<div>
										<input type="radio" name="sex" value="1" v-model="sex" id="ssa"><label
											for="ssa"></label>
										<span @click="sex=1">男</span>
									</div>
									<div>
										<input type="radio" name="sex" v-model="sex" value="0" id="ssb"><label
											for="ssb"></label>
										<span @click="sex=0">女</span>
									</div>
								</div>
							</div>
							<div class="line">
								<div class="line_title">邮箱：</div>
								<input type="text" v-model="email" class="form-control">
							</div>
						</div>
						<div class="buttons">
							<div class="sure" @click="sure">确定</div>
							<div class="closebtn" @click="alert_show=false;options_show=false;showzzc=false">关闭
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import $ from 'jquery'

	export default {
		props: ['searchVal','searchname'],
		name: "",
		data() {
			return {
				deptnames:"",
				showadd: false,
				showzzc: false,
				alert_show: false,
				alert_show2: false,
				alert_show3: false,
				alert_show4: false,
				delalert: false,
				choseall:false,
				page: 1,
				list: [],
				inglen: 0,
				limit: 10,
				num: 1,
				word:'',
				naes:'',
				name:'',
				setdeptid:'',
				acc:'',
				pass:'',
				oldpass:'',
				newpass:'',
				repass:'',
				phone:'',
				extTelNum:'',
				password:'',
				email:'',
				remark:'',
				type:'',
				id:'',
				showloading: false,
				ids:"",
				types:[],
				typeid:0,
				select_type:"",
				options_show:false,
				ind:'all',
				parentId:'',
				sex:1,
				delnum:0,
				dept:"选择部门",
				token:"",
				deptId:"",
				reg: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
			}
		},
		components: {},

		mounted() {
			this.token = sessionStorage.getItem('token')
			this.gettype();
			this.getlist(this.parentId);
		},
		watch: {
		      searchVal: function (val) {       
		       console.log(val);   // 接收父组件的值
			   this.parentId = val
			   this.deptId = val
			   this.word = ''
			   this.naes = ''
			   this.page=1
			   this.getlist(val)
		      },
			  searchname: function (val2) {
			   console.log(val2);   // 接收父组件的值
			   this.dept=val2
			  }
		    },
		methods: {
			stopuser(i){
				var url = ''
				if(this.list[i].isStoped == 0){
					url = '/sys/user/stop'
				}else{
					url = '/sys/user/restart'
				}
				
				var param = {
					ids:this.list[i].id
				}
				var that = this
				this.$http.post(this.$url + url, this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.$Toast(response.data.msg);
							that.getlist()
							that.$forceUpdate()
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
			},
			beforeUpload(e){
				this.showloading=true
				// const fd = new FormData();
				//  fd.append("file", e);
				//  fd.append("project", 'gd');
				//  fd.append("secret", this.$md5(e.name + 'gd' + e.size));
				
				// var that = this
				// this.$http.post(this.$url + '/sys/excel/import', fd, {
				// 		headers: {
				// 			'Content-Type': 'multipart/form-data; boundary=something'
				// 		}
				// 	})
				// 	.then(function(response) {
				// 		if (response.data.code == '1410') {
				// 			that.$Toast(response.data.msg);
				// 			sessionStorage.setItem('token', '')
				// 			that.$router.push('/login')
				// 			return
				// 		}
				// 		if(response.data.code != 0){
				// 			that.$Toast(response.data.msg)
				// 			that.showloading=false
				// 			return
				// 		}
				// 		that.showloading=false
				// 		that.page=1
				// 		that.getlist(that.parentId)
				// 		that.$emit('getnew', '123');
				// 		that.$Toast(e.msg);
				// 	})
				// 	.catch(function(error) {
				// 		console.log(error);
				// 	});
					
				// return false
			},
			handleChange(e){
				this.showloading=false
				this.page=1
				this.getlist(this.parentId)
				this.$emit('getnew', '123');
				this.$Toast(e.msg);
			},
			down(){
				var that = this
				this.$http.get(this.$url + '/sys/excel/downloadUser',{responseType:"blob"})
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast('下载模板成功！');
						const blob = new Blob([response.data]);
						      const fileName ='用户列表.xlsx';
						      if ("download" in document.createElement("a")) {
						        // 非IE下载
						        const elink = document.createElement("a");
						        elink.download = fileName;
						        elink.style.display = "none";
						        elink.href = URL.createObjectURL(blob);
						        document.body.appendChild(elink);
						        elink.click();
						        URL.revokeObjectURL(elink.href); // 释放URL 对象
						        document.body.removeChild(elink);
						      } else {
						        // IE10+下载
						        navigator.msSaveBlob(blob, fileName);
						      }
						
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
					
			changepass(){
				this.oldpass = this.oldpass.trim()
				if (this.oldpass=='') {
					this.$Toast("请填写旧密码");
					return
				}
				
				this.newpass = this.newpass.trim()
				if (this.newpass=='') {
					this.$Toast("请填写新密码");
					return
				}
				
				this.repass = this.repass.trim()
				if (this.repass=='') {
					this.$Toast("请确认密码");
					return
				}
				
				if (this.repass!=this.newpass) {
					this.$Toast("两次密码输入不一致");
					return
				}
				
				var param = {
					userId:this.resetid,
					oldPassword:this.oldpass,
					newPassword:this.newpass
				}
				var that = this
				this.$http.post(this.$url + '/sys/user/savepwd', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							if(response.data.success == true){
								that.$Toast(response.data.msg);
								that.alert_show3 = false
								that.oldpass=''
								that.newpass=''
								that.repass=''
							}else{
								that.showloading = false
								that.$Toast(response.data.msg);
							}
							
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
			}, 
			goalert(){
				this.pass = this.pass.trim()
				if (this.pass=='') {
					this.$Toast("请填写密码");
					return
				}
				
				var param = {
					userId:this.resetid,
					password:this.pass
				}
				var that = this
				this.$http.post(this.$url + '/sys/user/admin/setpwd', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							that.$Toast(response.data.msg);
							that.alert_show2 = false
							// that.alert_show3 = true
							that.pass=''
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
			},
			openreset(index){
					this.resetid=this.list[index].id
					this.alert_show2=true
			},
			selectit(index){
				if(index=='all'){
					this.dept = '全部'
					this.deptId = ''
				}else{
					this.dept = this.types[index].name
					this.deptId = this.types[index].id
				}
				this.options_show=false
				this.showzzc=false
			},
			// 获取部门
			gettype() {
				this.showloading = true
			
				var that = this
				this.$http.get(this.$url + '/sys/dept/select')
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.types = response.data.data
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			
			},
			handleSizeChange(val) {
			       console.log(`每页 ${val} 条`);
								this.limit = val
								this.choseall = false
								this.getlist(this.parentId)
			     },
			     handleCurrentChange(val) {
			       console.log(`当前页: ${val}`);
								this.page = val
								this.choseall = false
								this.getlist(this.parentId)
			     },
			// 打开弹窗
			openalert(type,index){
				this.type=type
				if(index !=undefined){
					this.id=this.list[index].id
					this.name=this.list[index].realName
					this.acc=this.list[index].userName
					// this.password=null
					this.dept=this.list[index].departName
					this.deptId=this.list[index].deptId
					this.sex=this.list[index].sex
					this.email=this.list[index].email
					this.phone=this.list[index].phoneNo
					this.extTelNum=this.list[index].extTelNum
				}else{
					this.name=''
					this.sex=''
					this.acc=''
					this.password=''
					// this.dept='选择部门'
					// this.deptId=''
					this.sex=1
					this.email=''
					this.phone=''
					this.extTelNum=''
				}
				console.log(this.password)
				this.alert_show=true
			
			},
			delopen2(){
				var ids=''
				var num = 0
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf==true){
						ids = ids+''+this.list[i].id+','
						num++
					}
				}
				this.ids = ids.substring(0,ids.length-1)
				if(this.ids==''){
					this.$Toast('暂无选中');
					return
				}
				this.delnum = num	
				this.alert_show4 = true
			},
			plset(){
				if(!this.setdeptid){
					this.$Toast('请选择部门');
					return
				}
				this.alert_show4=false
				
				var param = {
					ids:this.ids,
					deptId:this.setdeptid
				}
				var that = this
				this.$http.post(this.$url + '/sys/user/setUsersDept', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.page=1
						that.setdeptid = ''
						that.ids = ''
						that.getlist(that.parentId)
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			delopen(){
				var ids=''
				var num = 0
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf==true){
						ids = ids+''+this.list[i].id+','
						num++
					}
				}
				this.ids = ids.substring(0,ids.length-1)
				if(this.ids==''){
					this.$Toast('暂无选中');
					return
				}
				this.delnum = num
				this.delalert=true			
			},
			// 删除
			del(){
				this.delalert=false
				var param = {
					ids:this.ids
				}
				var that = this
				this.$http.post(this.$url + '/sys/user/delete', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.$Toast(response.data.msg);
						that.page=1
					that.getlist(that.parentId)
					})
					.catch(function(error) {
						console.log(error);
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			changeall(){
				if(this.choseall){
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = true
					}
				}else{
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].chosesf = false
					}
				}
			},
			chosechange(){
				for (var i = 0; i < this.list.length; i++) {
					if(this.list[i].chosesf == true){
						this.choseall=true
					}else{
						this.choseall=false
						break
					}
					
				}
			},
			// 表单提交
			sure() {
				this.name = this.name.trim()
				if (this.name=='') {
					this.$Toast("请填写真实姓名");
					return
				}
				if (this.name.length > 20) {
					this.$Toast("真实姓名过长");
					return
				}
				this.acc = this.acc.trim()
				if (this.acc=='') {
					this.$Toast("请填写账号");
					return
				}
				if (this.acc.length > 20) {
					this.$Toast("账号过长");
					return
				}
				if(this.type == 'add'){
					this.password = this.password.trim()
					if (this.password=='') {
						this.$Toast("请填写密码");
						return
					}
				}
				this.phone =  this.phone==null?'': this.phone
				this.phone = this.phone.trim()
				// if (this.phone=='') {
				// 	this.$Toast("请填写手机号");
				// 	return
				// }
				if (this.phone && !this.reg.test(this.phone)) {
					this.$Toast("请输入正确的手机号");
					return false;
				}
				if (this.deptId=='') {
					this.$Toast("请选择部门");
					return
				}
				
				this.email = this.email?this.email.trim():''
				if (this.email && !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
					this.$Toast("请输入正确的邮箱");
					return false;
				}
				
				
				this.showloading = true
				var that = this
				var param={}
				if(this.type=='add'){
					 param = {
						realName:this.name,
						userName:this.acc,
						password:this.password,
						deptId:this.deptId,
						sex:this.sex,
						email:this.email,
						phoneNo:this.phone,
						extTelNum:this.extTelNum,
					}
				}else{
					 param = {
						id:this.id,
						realName:this.name,
						userName:this.acc,
						// password:this.password,
						deptId:this.deptId,
						sex:this.sex,
						email:this.email,
						phoneNo:this.phone,
						extTelNum:this.extTelNum,
					}
				}	
				this.$http.post(this.$url + '/sys/user/save', this.$qs.stringify(param))
						.then(function(response) {
							if (response.data.code == '1410') {
								that.$Toast(response.data.msg);
								sessionStorage.setItem('token', '')
								that.$router.push('/login')
								return
							}
							if(response.data.success == true){
								
								that.$Toast(response.data.msg);
								that.alert_show = false
								
								that.getlist(that.parentId)
							}else{
								
								that.showloading = false
								that.$Toast(response.data.msg);
							}
						})
						.catch(function(error) {
							console.log(error);
						that.$Toast('网络拥堵，刷新一下');
						});
				
			},
			// 点击遮罩层
			close(){
				for (var i = 0; i < this.list.length; i++) {
					this.list[i].static=false
				}
				this.showzzc=false
			},
			
			getlist(id) {
				this.showloading = true
				this.choseall = false
				id = id?id:''
				var that = this
				var url = encodeURI(this.$url + '/sys/user/list?page='+this.page+'&limit='+this.limit+'&deptId='+id+'&userName='+this.naes)
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data.records
						for (var i = 0; i < that.list.length; i++) {
							that.list[i].chosesf = false
							that.list[i].static = false
							that.list[i].id = window.atob(that.list[i].id)
						}
						that.choseall = false
						that.inglen = response.data.data.total
						if (that.inglen > that.limit) {
							that.num = Math.ceil(that.inglen / that.limit)
						} else {
							that.num = 1
						}
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});

			},
		},

		computed: {},
	}
</script>
<style lang='less' scoped>
	.down3_btn {
		background-color: lightseagreen;
		border: lightseagreen;
		color: #fff !important;
	}

	.flexbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.line #ssa,
	.line #ssb {
		width: 16px;
		height: 16px;
	}

	.modal-content {
		overflow: visible;
	}

	input[type='radio'] {
		opacity: 0;
		position: absolute;
		z-index: -2;
	}

	input[type="radio"]+label {
		width: 13px;
		height: 13px;
		min-height: 13px;
		padding: 1.5px;
		border: 1px solid #4f4f4f;
		border-radius: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
		box-sizing: border-box;
		margin-right: 7px;
	}

	input[type="radio"]+label::before {
		content: '';
		border-radius: 1.4rem;
		width: 7px;
		height: 7px;
		/* margin-top: 2.5px;
		margin-left: 1px;
		display: flex; */
		display: block;
		margin-bottom: 0;
		box-sizing: border-box;
		/* justify-content: center; */
		/* align-items: center; */
	}

	input[type="radio"]:checked+label {
		border: 1px solid #0075ff;
		box-sizing: border-box;
	}

	input[type="radio"]:checked+label::before {
		background: #0075ff;
	}

	.radio div {
		display: flex;
		align-items: center;
		color: #000;
		margin-right: 50px;
		cursor: pointer;
	}


	.edit {
		margin-right: 10px;
	}

	.line_title span {
		color: red;
	}

	.line_title {
		width: 77px;
		text-align: right;
	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}



	.w600 .modal-body.h100 {
		height: 460px;
		overflow-y: visible;
	}

	.line textarea {
		height: 75px;
	}

	.radio {
		width: 360px;
		display: flex;

	}

	.line_title {
		font-size: 14px;
		color: #000000;
		line-height: 34px;
	}

	.line {
		display: flex;
		margin-top: 19px;
		justify-content: center;

	}

	.modal-header.tit {
		font-size: 20px;
		color: #000;
		font-weight: normal;
	}

	.w600 {
		margin: calc(50vh - 275px) auto;
	}

	.tcent {
		text-align: center;
	}

	input[type='checkbox'] {
		opacity: 0;
		position: absolute;
		z-index: -2;
	}

	input[type="checkbox"]+label {
		width: 16px;
		height: 16px;
		border: 1px solid #c8c8c8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 0;
		box-sizing: border-box;
		margin-right: 7px;
	}

	input[type="checkbox"]+label::before {
		content: '';
		display: block;
		margin-bottom: 0;
		box-sizing: border-box;
	}

	input[type="checkbox"]:checked+label {
		border: 1px solid #0075ff;
		box-sizing: border-box;
		background: #0075ff url(../../../assets/images/dui.png) no-repeat;
		background-size: 80% 80%;
		background-position-x: 20%;
		background-position-y: 20%;
	}

	input[type="checkbox"]:checked+label::before {
		background: #0075ff;
	}


	.search_inp {
		width: 356px;
		margin-bottom: 0;
	}

	.title {
		font-size: 24px;
		color: #000000;
	}


	.btns {
		width: 72px;
		padding: 0;
	}

	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 4;
		top: 0;
		left: 0;
	}


	.loading-content {
		position: absolute;
		z-index: 2000;
		/* background-color: rgba(0, 0, 0, 0.8); */
		margin: 0;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transition: opacity 0.3s;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		/* width: 200px;
		height: 150px;
		border-radius: 10px; */
	}

	.loading-spinner {
		text-align: center;
	}

	.loading-spinner .circular {
		height: 42px;
		animation: loading-rotate 2s linear infinite;
	}

	.loading-spinner .path {
		animation: loading-dash 1.5s ease-in-out infinite;
		stroke-dasharray: 90, 150;
		stroke-dashoffset: 0;
		/* stroke- 2; */
		stroke: #000;
		stroke-linecap: round;
	}

	.loading-text {
		font-size: 14px;
		color: #000;
	}

	@keyframes loading-rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40px;
		}

		to {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120px;
		}
	}

	.biaoq {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.qx:hover {
		background: #edf3fd;
		color: #4286f5;
	}


	.down {
		background: #fff;
		position: absolute;
		top: 30px;
		right: 0;
		width: 130px;
		text-align: left;
		padding: 0 5px;
		z-index: 5;

		color: #666;
		box-shadow: 0 0 10px rgb(0 0 0 / 20%);

	}

	.li {
		border-bottom: 1px solid #f3f3f3;
		padding-left: 20px;
		height: 40px;
		line-height: 40px;
	}

	.li:nth-last-of-type(1) {
		border-bottom: none;
	}

	.more {
		position: relative;
	}

	.btns .iconfont {
		font-size: 10px;
		transition: all .3s;
		transform: rotateZ(0deg);
		line-height: 26px;
	}

	.actives {
		background: #4286f5;
		color: #fff;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}


	.modal {
		position: absolute;
	}

	.modal-dialog {
		height: 97%;
	}

	.modal-header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	.modal-content {
		/* width: 85%; */
		margin: 0 auto;
		max-height: 100%;
		/* height: 65vh; */
		/* overflow-y: scroll; */
	}

	.cent {
		width: 100%;
		align-items: center;
	}
</style>
